.modal-wrapper {
    display: none;
}

.modal-wrapper.active {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, .5);
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.9); */
}
.modal-wrapper.active .modal{
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 75%;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, .5);
    }

   .modal .top {
    flex-basis: 10%;
    background-color: whitesmoke;
    opacity:0.7;
    }
 
   .modal .middle {
    flex-grow: 1;
    background-color: #ccc;
    overflow: auto;
    width:100%;
    height:auto;
    scrollbar-track-color:red;
    vertical-align: middle;
    text-align: center;
   }

   .middle img {
    height: 99.2%;
    position: relative;    
   }
   
#style-2::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: rgb(160, 158, 158);
}

#style-2::-webkit-scrollbar
{
	width: 12px;
    background-color: rgb(190, 190, 190);
}

#style-2::-webkit-scrollbar-thumb
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: rgb(78, 78, 78);
}

   .modal .bottom {
    flex-basis: 10%;
    background-color: whitesmoke;
    opacity:0.7;
    text-align: center;
    
   }
   span.description{
    font:400 20px/26px 'Dosis', sans-serif;
    color: black;
    padding-top: 1%;
    display: block;
   }
   div.exit{
    position: absolute;
    color: black;
    font:600 24px/50px 'Dosis', sans-serif;
    background-color: #ccc;
    box-shadow: 0 0 30px 10px rgba(0, 0, 0, .5);
    width: 120px;
    height: 50px;
    text-align: center;
    left:calc(50% - 60px);
    top: 103%;
    transform: rotateZ(4deg);
    cursor: pointer;
    }
    div.exit:hover{
    background-color: rgb(70, 70, 70); 
    color: white;
    }

    .blur {
        filter: blur(1px);
    }